/**
 * Created by Administrator on 2017/5/9.
 */
function Bar(option){
    this._init(option);
}
Bar.prototype = {
    constructor: Bar,
    _init: function (option) {
        this.option = option || {};
        //矩形坐标
        this.x = option.x || 0;
        this.y = option.y || 0;
        //矩形的宽高
        this.width = option.width || 100;
        this.height = option.height || 100;
        //描边的边框大小和颜色
        this.stroke = option.stroke || "black";
        this.strokeWidth = option.strokeWidth || 1;
        //填充颜色
        this.fill = option.fill || "black";
        //圆角
        this.radius = option.radius || 0;
        //进度
        this.value = option.value||0;
    },

    render: function () {
        //创建组
        this.group = new Konva.Group({
            x: 0,
            y: 0
        });
        //添加组
        layer.add(this.group);
        //创建内长方形
        var innerRect = new Konva.Rect({
            x: this.x,
            y: this.y,
            width: this.width*this.value,
            height: this.height,
            fill: this.fill,
            radius: this.radius,
            id: 'rect'
        });
        //添加到组中
        this.group.add(innerRect);
        //创建外面长方行
        var outerRect = new Konva.Rect({
            x: this.x,
            y: this.y,
            width: this.width,
            height: this.height,
            stroke: this.stroke,
            strokeWidth: this.strokeWidth,
            cornerRadius: this.radius,
        });
        //添加到组中
        this.group.add(outerRect);
    },
    update: function () {
        //获取里面的矩形
        var innerRect = this.group.findOne("#rect");
        //做动画
        innerRect.to({
                width: this.width,
                duration: 3,//动画事件
                easing:Konva.Easings.EaseIn,//动画类型
                // yoyo:true,//是否循环
                onFinish:function () {
                    console.log('动画完毕')
                }
            });

    }
}